<template>
  <div class="design-nav">
    <div class="design-nav-left">
      <div class="design-nav-title">{{ globalConfig.title }}</div>
      <div class="design-nav-radio ml20">
        <el-text>{{ resolutionRatio }}</el-text>
      </div>
      <div class="design-nav-scale ml20">
        <el-select v-model="scale" style="width: 100px" @change="scaleChange">
          <el-option
            v-for="item in scaleList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="design-nav-align ml20">
        <div
          class="design-nav-align-list"
          v-for="item in topNavIcon"
          :key="item.id"
          :title="item.title"
          @click="handleClick(item)"
        >
          <svg class="al-icon">
            <use :xlink:href="item.icon"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="design-nav-right">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary" @click="handlePreview">预览</el-button>
      <el-button type="primary" @click="handleCanvas">生成图片</el-button>
    </div>
  </div>
</template>
<script setup>
import { scaleList } from '../config/initData'
import { topNavIcon } from '../config/layoutType'
import { ref, computed, toRefs } from 'vue'
// import { convertImageToBase64 } from '../utils'
// import html2canvas from 'html2canvas'
// eslint-disable-next-line no-undef
let { proxy } = getCurrentInstance()

const props = defineProps({
  globalConfig: {
    type: Object,
    default: () => {},
  },
})
let formData = defineModel()
let { globalConfig } = toRefs(props)
let scale = ref(1)
let emits = defineEmits(['updateScale', 'submit', 'preview', 'canvas'])
let scaleChange = val => {
  emits('updateScale', val)
}
let resolutionRatio = computed(() => {
  return `${globalConfig.value.resolutionRatio[0]} * ${globalConfig.value.resolutionRatio[1]}`
})
let handleClick = item => {
  if (formData.value && formData.value.type) {
    formData.value.active = true
    if (item.id == 1) {
      // 左对齐
      formData.value.x = 0
    } else if (item.id == 2) {
      // 水平居中
      formData.value.x = Math.floor(
        globalConfig.value.resolutionRatio[0] / 2 - formData.value.w / 2,
      )
    } else if (item.id == 3) {
      formData.value.x = globalConfig.value.resolutionRatio[0]
    } else if (item.id == 4) {
      // 居上
      formData.value.y = 0
    } else if (item.id == 5) {
      // 居上
      formData.value.y = globalConfig.value.resolutionRatio[1]
    } else if (item.id == 6) {
      // 垂直居中
      formData.value.y = Math.floor(
        globalConfig.value.resolutionRatio[1] / 2 - formData.value.h / 2,
      )
    }
  } else {
    proxy.$modal.msgWarning('请选择图层')
  }
}
let handleSubmit = () => {
  emits('submit')
}
let handlePreview = () => {
  emits('preview')
}
let handleCanvas = () => {
  emits('canvas')
}
</script>
<style scoped>
.design-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.design-nav-left {
  display: flex;
  align-items: center;
}
.design-nav-align {
  display: flex;
  align-items: center;
  column-gap: 16px;
  cursor: pointer;
}
</style>
